11、SpringBoot-CRUD-thymeleaf公共页面元素抽取-白红宇

11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

阅读量：7015 次

发布时间：2019-06-28

本文共 4620 字，大约阅读时间需要 15 分钟。

thymeleaf公共页面元素抽取

存在一种现象：两个文件的代码只有一部分代码不一样

其余的均相同，此时就可以提取公共的代码去简化开发

1、抽取公共片段
     
      © 2011 The Good Thymes Virtual Grocery
     
2、引入公共片段
     
~{templatename::selector}：模板名::选择器~{templatename::fragmentname}:模板名::片段名3、默认效果：insert的公共片段在div标签中如果使用th:insert等属性进行引入，可以不用写~{}：行内写法可以加上：[[~{}]];[(~{})]

三种引入公共片段的th属性：

th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中


     
          © 2011 The Good Thymes Virtual Grocery
     
引入方式
     
     
     
效果th:insert：
         
      
           © 2011 The Good Thymes Virtual Grocery    
      
     
th:replace：
     
      © 2011 The Good Thymes Virtual Grocery
     
th:include：
     
      © 2011 The Good Thymes Virtual Grocery

关于模板名：

1.假设在同一目录：

a.html

b.html

此时b用a中的公共片段就是

th:replace="~{a::#selector}"

2.不在同一目录

commons

-a.html

b.html

commons和b.html在同一级目录

此时b用a中的公共片段是

th:replace="~{commons/a::#selector}"

实例：

1.dashboard.html


        
      [[${session.user}]]   
         
            
                Sign out

list.html

2.dashboard.html

list.html

此时使用的是选择器

class 用

id 用

引入片段的时候传入参数

判断属性进行高亮的设置

主要是class属性active值是否存在

            
       
                    
                
               Dashboard (current)    
            
       
                    
                
               Orders    
            
       
                    
                    
                
               Products    
            
       
                    
                    
                    
                
               员工列表

前台接受手台的数据

public class Employee {   private Integer id;    private String lastName;    private String email;    //1 male, 0 female    private Integer gender;    private Department department;    private Date birth;...}public class Department {   private Integer id;   private String departmentName;...}

@Repositorypublic class DepartmentDao {   private static Map
     
       departments = null;   static{      departments = new HashMap
      
       ();      departments.put(101, new Department(101, "D-AA"));      departments.put(102, new Department(102, "D-BB"));      departments.put(103, new Department(103, "D-CC"));      departments.put(104, new Department(104, "D-DD"));      departments.put(105, new Department(105, "D-EE"));   }   public Collection
       
         getDepartments(){      return departments.values();   }   public Department getDepartment(Integer id){      return departments.get(id);   }}

@Repositorypublic class EmployeeDao {   private static Map
     
       employees = null;      @Autowired   private DepartmentDao departmentDao;      static{      employees = new HashMap
      
       ();      employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));      employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));      employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));      employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));      employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));   }      private static Integer initId = 1006;      public void save(Employee employee){      if(employee.getId() == null){         employee.setId(initId++);      }            employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));      employees.put(employee.getId(), employee);   }      public Collection
       
         getAll(){      return employees.values();   }      public Employee get(Integer id){      return employees.get(id);   }      public void delete(Integer id){      employees.remove(id);   }}

@Controllerpublic class EmployeeController {    @Autowired    EmployeeDao employeeDao;    //查询所有员工返回列表页面    @GetMapping("/emps")    public String list(Model model){        Collection
     
       emps = employeeDao.getAll();        //将查询到的数值放在请求域中        model.addAttribute("emps",emps);        //目标引擎会自动进行拼串        return "emp/list";    }}

前段页面进行数据的获取


     
                                       #                  lastName                  email                  gender                  department                  birth              
         
                                                                     [[${emp.lastName}]]